<template>
  <Frame>
    <h1 slot="contitle" class="title">往届成员</h1>
    <div slot="text">
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="item in list" v-if="item.memberGrade<year-3" :timestamp="item.memberGrade" style="font-size: 17px" placement="top">
            <el-card>
              <div class="row">
                <div class="col-md-2">
                  <el-avatar :size="100">
                    <img :src="item.memberPhoto" alt="">
                  </el-avatar>
                </div>
                <div class="col-md-9 title">
                  <h3 class="fzh3">{{ item.memberName }}</h3>
                  <p>{{ item.memberIntroductory}}</p>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </Frame>
</template>

<script>
// import Frame from "../Frame";
const Frame = () => import('../Frame')
export default {
  name: "Previous",
  components: {
    Frame
  },
  data() {
    let  date =  new  Date();
    let  year = date.getFullYear();
    return {
      year,
      list:[]
    }
  },
  created() {
    this.$nextTick(function () {
      this.$axios({
        url: '/officialwebsite/memberFrontDesk/selectAll',
        method: 'get',
      }).then(res => {
        this.list=res.obj.bannerMembers
      })
    })
  }
}
</script>

<style lang="less" scoped>
.block {
  .title {
    margin-top: -15px;
  }
}
@media screen and (max-width: 850px) {
  .row {
    .fzh3 {
      font-size: 18px!important;
    }
    font-size: 14px;
  }
}
</style>
